<script setup lang="ts">
import OppositeChiGroup from '@/components/tiles/opposite/group/OppositeChiGroup.vue'
import OppositePengGroup from '@/components/tiles/opposite/group/OppositePengGroup.vue'
import OppositeMingGangGroup from '@/components/tiles/opposite/group/OppositeMingGangGroup.vue'
import OppositeAnGangGroup from '@/components/tiles/opposite/group/OppositeAnGangGroup.vue'
import { onMounted, watchEffect, ref } from 'vue'
const props = defineProps({
  // 牌组
  groups: {type: Array, required: false, default: []}
})
let groupsCount = ref(0);

let groupTransformStyleArr = ref(new Array());

function loadStyles() {
  let tempGroups = new Array();
  groupsCount.value = props.groups.length ? props.groups.length : 0;
  for (var i=0; i<groupsCount.value; i++) {
    tempGroups.push(props.groups[i]);
  }
  let tempTranslateX = 0; 
  // 先反转, 因为这里元素是flex-end的，所以需要反转计算
  for (var i=0; i<groupsCount.value; i++) {
    if (i == 0) {
      groupTransformStyleArr.value[i] = "translateX(0px)";
    } else {
      let preGroup = tempGroups[i-1];
      // 判断前一个元素是否是暗杆或者明杠，这个占了4个，所以暗杠与明杠的x-y轴规则特殊处理
      if ((preGroup as any).type == "AN_GANG" || (preGroup as any).type == "MING_GANG") {
        tempTranslateX = tempTranslateX - 50;
      } else {
        tempTranslateX = tempTranslateX - 30;
      }
      groupTransformStyleArr.value[i] = "translateX(" + tempTranslateX +"px)" ;
    }
  }
}

onMounted(() => {
  loadStyles();
})

watchEffect(() => {
  loadStyles();
})
</script>

<template>
  <div class="opposite-owned-tiles-groups">
    <template v-for="(value, index) in props.groups">
      <template v-if="(value as any).type == 'CHI'">
          <OppositeChiGroup :tiles="(value as any).tiles" :transformStyle="groupTransformStyleArr[index]"></OppositeChiGroup>
      </template>
      <template v-else-if="(value as any).type == 'PENG'">
          <OppositePengGroup :tile="(value as any).tiles[0]" :transformStyle="groupTransformStyleArr[index]"></OppositePengGroup>
      </template>
      <template v-else-if="(value as any).type == 'MING_GANG'">
          <OppositeMingGangGroup :tile="(value as any).tiles[0]" :transformStyle="groupTransformStyleArr[index]"></OppositeMingGangGroup>
      </template>
      <template v-else-if="(value as any).type == 'AN_GANG'">
          <OppositeAnGangGroup :transformStyle="groupTransformStyleArr[index]"></OppositeAnGangGroup>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.opposite-owned-tiles-groups{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  div:not(:first-child) {
    margin-left: 35px;
  }
}
</style>
